<template>
	<view class="content">
		<scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation>
			<view class="order-nav">
				<view class="nav-item" v-for="(nav, index) in orderState" :key="index" @tap="onNav(index, nav.id)">
					<view class="item-title" :class="{ 'item-title-active': tabindex === index }">{{ nav.title }}</view>
					<view class="nav-line" :class="{ 'line-active': tabindex === index }"></view>
				</view>
			</view>
		</scroll-view>

		<view class="list-box">
			<mescroll-body ref="mescrollRef" height="1050" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<!-- <view class="list-item">
					<view class="goods-details">
						<view class="image-box">
							<image src="../../../../static/images/prefile/jianping.png"></image>
						</view>
						<view class="goods-info-box">
							<view class="goods-name">华为智能手机华为智能手机 </view>
							<view class="goods-price">¥199.00</view>
							<view class="goods-chengtuan">10人成团，2人中奖</view>
							<view class="goods-tips">
								<image src="../../../../static/images/prefile/red-package.png"></image>
								<text>商家补贴￥869</text>
							</view>
						</view>
						<view class="baoming">
							<view class="">已报名3人</view>
							<view style="display: flex; align-items: center; margin-top: 3upx;">
								<u-line-progress style="height: 8upx; width: 85upx;" active-color="#FFFF00"
									:percent="70" :show-percent="false"></u-line-progress>
								<text style="font-size: 16upx; color: #E5E5E5; margin-left: 5upx;">1 </text> /5</text>
							</view>
						</view>
					</view>

					<view style=" margin-top: 35upx; width: 646upx;height: 1upx;background: #EEEEEE;"></view>
					<view class="footer-box">
						<view class="tips">
							邀请参与拼团，每拼成功一团可获得 <text style="color: #FF6A55;">￥8.60</text>
						</view>
						<view class="share-box">
							去分享
						</view>
					</view>
				</view> -->
				<view class="list-item" v-for="(item, index) in tabList" :key="index">
					<view class="goods-details">
						<view class="image-box">
							<image :src="item.has_one_group.has_one_goods.thumb"></image>
						</view>
						<view class="goods-info-box">
							<view class="goods-name text-line2">{{item.has_one_group.has_one_goods.title}} </view>
							<view class="goods-price">¥{{item.groups_option_level.group_price}}</view>
							<view class="goods-chengtuan">{{item.groups_option_level.member_num}}人成团，{{item.zj_user_num}}人中奖</view>
							<view class="goods-tips">
								<image src="../../../../static/images/prefile/red-package.png"></image>
								<text>商家补贴￥{{item.subsidy}}</text>
							</view>
						</view>
						<view v-if="item.status === 1" class="baoming" @click="$Router.push({path: '/pages/prefile/group-leader/group-details/group-details', query: {id: item.id}})">
							<view class="">已报名{{item.has_many_success_member_count}}人</view>
							<view style="display: flex; align-items: center; margin-top: 3upx;">
								<!-- <u-line-progress style="height: 8upx; width: 85upx;" active-color="#FFFF00"
									:percent="(item.has_many_success_member_count/item.groups_option_level.member_num) * 100" :show-percent="false"></u-line-progress> -->
								<u-line-progress height="8" style="height: 8upx; width: 85upx;" active-color="#FFFF00"
									:percent="(item.has_many_success_member_count/item.groups_option_level.member_num) * 100"
									:show-percent="false"></u-line-progress>
								<text style="font-size: 16upx; color: #E5E5E5; margin-left: 5upx;">{{item.has_many_success_member_count}} </text> /{{item.groups_option_level.member_num}}</text>
							</view>
						</view>
						<view v-else-if="item.status === 2" style="background-color: #FCBEB6;" class="baoming"  @click="$Router.push({path: '/pages/prefile/group-leader/group-details/group-details', query: {id: item.id}})">
							<text style="color: #FEFEFE; font-size: 25upx;">已成团</text>
						</view>
						<view v-else-if="item.status === 3" class="baoming" style="background-color: #EEEEEE;" @click="$Router.push({path: '/pages/prefile/group-leader/group-details/group-details', query: {id: item.id}})">
							<view class="" style="font-size: 25upx; color: #919191;">成团失败</view>
							<view style="font-size: 22upx; color: #919191;">
								{{item.has_many_success_member_count}}  /{{item.groups_option_level.member_num}}
							</view>
						</view>
					</view>
				
					<view style=" margin-top: 35upx; width: 646upx;height: 1upx;background: #EEEEEE;"></view>
					<view class="footer-box" v-if="item.status === 1">
						<view class="tips">
							拼团成功，成团可获得成团奖励
						</view>
						<!-- <view class="share-box">
							去分享
						</view> -->
					</view>
					<view class="footer-box" v-if="item.status === 2">
						<view class="tips">
							获得 <text style="color: #FF6A55;">￥{{item.share_price}}元成团奖励</text>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				tabindex: 0,
				orderState: [{
						id: 1,
						title: '拼团中',
					},
					{
						id: 2,
						title: '已成团',
					},
					{
						id: 3,
						title: '成团失败',
					},
				],
				orderPrams: {
					page: 1,
					status: 1
				},
				tabList: []
			};
		},
		methods: {
			onNav(index, id) {
				this.tabindex = index;
				this.orderPrams.status = id;
				this.downCallback();
			},
			// 下拉刷新列表
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )

			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.orderPrams.page = page.num;
				this.$http.get('user.leaderlistHistry', this.orderPrams).then(res => {
					let curPageData = res.data.data;
					let curPageLen = curPageData.length;
					let totalCount = res.data.total;
					if (page.num == 1) this.tabList = []; //如果是第一页需手动置空列表
					this.tabList = this.tabList.concat(curPageData); //追加新数据
					this.mescroll.endBySize(curPageLen, totalCount);
				})
				// 获取轮播图数据
			},
		}
	}
</script>

<style scoped lang="scss">
	@import './group-leader-histry.scss';
</style>
